/*
 * @Author: wuhao930406 1148547900@qq.com
 * @Date: 2023-06-21 10:12:13
 * @LastEditors: wuhao930406 1148547900@qq.com
 * @LastEditTime: 2023-08-07 15:37:11
 * @FilePath: /legion-iot/src/pages/dashboard/components/Map.jsx
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
 */
import React, { useState, useEffect, useRef } from "react";
import { Map, Marker, Polygon } from "react-amap";
import { useLocation, useOutletContext, history } from "umi";
import { Button, Tabs, Badge, Modal } from "antd";
import styles from "../index.less";
import { SyncOutlined } from "@ant-design/icons";
import { useTimeout } from "ahooks";

// let mockmarker = [
//   {
//     longitude: 118.796646,
//     latitude: 32.059861,
//     name: "Point A",
//     description: "This is Point A",
//     warning: 2,
//     type: "fire",
//   },
//   {
//     longitude: 118.797005,
//     latitude: 32.060107,
//     name: "Point B",
//     description: "This is Point B",
//     warning: 0,
//     type: "fire1",
//   },
//   {
//     longitude: 118.796772,
//     latitude: 32.060526,
//     name: "Point C",
//     description: "This is Point C",
//     warning: 66,
//     type: "fire2",
//   },
//   {
//     longitude: 118.796567,
//     latitude: 32.05993,
//     name: "Point D",
//     description: "This is Point D",
//     warning: 102,
//     type: "fire3",
//   },
//   {
//     longitude: 118.797301,
//     latitude: 32.060382,
//     name: "Point E",
//     description: "This is Point E",
//     warning: 25,
//     type: "fire4",
//   },
//   {
//     longitude: 118.796943,
//     latitude: 32.060612,
//     name: "Point F",
//     description: "This is Point F",
//     warning: 12,
//     type: "fire2",
//   },
//   {
//     longitude: 118.796944,
//     latitude: 32.059928,
//     name: "Point G",
//     description: "This is Point G",
//     warning: 2,
//     type: "fire3",
//   },
//   {
//     longitude: 118.797219,
//     latitude: 32.060288,
//     name: "Point H",
//     description: "This is Point H",
//     warning: 45,
//     type: "fire",
//   },
//   {
//     longitude: 118.796692,
//     latitude: 32.060619,
//     name: "Point I",
//     description: "This is Point I",
//     warning: 0,
//     type: "fire1",
//   },
//   {
//     longitude: 118.796585,
//     latitude: 32.060059,
//     name: "Point J",
//     description: "This is Point J",
//     warning: 0,
//     type: "fire",
//   },
// ];

function Amap({ mode, setdom, setkey, data }) {
  const [markers, setmarkers] = useState([]);
  const mapref = useRef();
  const [mapconf, setmapconf] = useState({
    center: {
      longitude: 120.536137, // 根据经纬度 120.533137,32.403222 绘制一个半径10公里的不规则多边形 要求有60个点 结果放置在数组中
      latitude: 32.403222,
    },
    zoom: 15.5,
  });

  const [path, setPath] = useState();
  const [path1, setPath1] = useState();
  const [path2, setPath2] = useState();
  const [path3, setPath3] = useState();
  const [path4, setPath4] = useState();

  useEffect(() => {
    // setdom(
    //   <div className="spread" style={{ height: "100%" }}>
    //     <div
    //       style={{ flex: 1, overflow: "hidden", height: "100%", paddingTop: 9 }}
    //     >
    //       <Tabs
    //         size="large"
    //         type="card"
    //         items={markers?.map((it) => ({
    //           key: it.name,
    //           label: it?.name,
    //         }))}
    //         onChange={(key) => {
    //           let cur = markers?.filter((it) => it.name == key)[0];

    //           setmapconf((s) => ({
    //             ...s,
    //             center: {
    //               longitude: cur?.longitude,
    //               latitude: cur?.latitude,
    //             },
    //             zoom: 18,
    //           }));
    //         }}
    //       ></Tabs>
    //     </div>
    //     <Button
    //       shape="circle"
    //       type="primary"
    //       style={{ padding: "5px", flexShrink: 0 }}
    //       onClick={() => {
    //         setmapconf((s) => ({
    //           ...s,
    //           center: {
    //             longitude: 118.796877,
    //             latitude: 32.060255,
    //           },
    //           zoom: 18,
    //         }));
    //       }}
    //       icon={<SyncOutlined />}
    //     ></Button>
    //   </div>
    // );
    const data = [
      [120.528792, 32.40835],
      [120.53392, 32.410252],
      [120.540263, 32.412807],
      [120.545027, 32.4148],
      [120.546048, 32.410039],
      [120.546954, 32.400612],
      [120.548343, 32.396137],
      [120.549448, 32.393218],
      [120.545623, 32.392022],
      [120.541003, 32.390801],
      [120.539983, 32.392069],
      [120.537149, 32.39731],
      [120.533975, 32.402064],
      [120.532264, 32.401687],
      [120.532636, 32.405646],
      [120.5259, 32.40294],
      [120.524114, 32.40649],
      [120.528792, 32.40835],
    ];
    const data1 = [
      [120.533975, 32.402064],
      [120.532264, 32.401687],
      [120.532636, 32.405646],
      [120.536688, 32.406755],
      [120.538469, 32.403747],
      [120.533975, 32.402064],
    ];

    const data2 = [
      [120.548343, 32.396137],
      [120.549448, 32.393218],
      [120.545623, 32.392022],
      [120.544074, 32.394567],
    ];

    const data3 = [
      [120.548343, 32.396137],
      [120.547592, 32.398549],
      [120.543079, 32.397035],
      [120.544074, 32.394567],
    ];

    const data4 = [
      [120.546954, 32.400612],
      [120.547592, 32.398549],
      [120.543079, 32.397035],
      [120.542639, 32.399269],
    ];

    setPath(data);
    setPath1(data1);
    //下1
    setPath2(data2);
    //下2
    setPath3(data3);
    //下3
    setPath4(data4);
  }, []);

  // useTimeout(() => {
  //   setmarkers((s) => {
  //     let news = JSON.parse(JSON.stringify(s));
  //     news[1] = {
  //       longitude: 118.797005,
  //       latitude: 32.060107,
  //       name: "Point B",
  //       description: "This is Point B",
  //       warning: 10,
  //       type: "fire1",
  //     };

  //     return news;
  //   });
  // }, 1000);

  //渲染点
  // function renderMarker(extData) {
  //   return (
  //     <Badge count={extData?.warning} size="small">
  //       <div
  //         style={{
  //           width: 46.52,
  //           height: 50,
  //           background: `url(./icons/${extData?.type}.png) no-repeat `,
  //           backgroundSize: "cover",
  //           backgroundPosition: extData?.warning ? "0px 0px" : "0 -52px",
  //           transition: "all 0.4s",
  //         }}
  //       ></div>
  //     </Badge>
  //   );
  // }

  //点的点击事件等
  // const markersEvents = {
  //   created: (allMarkers) => {
  //     console.log("All Markers Instance Are Below");
  //     console.log(allMarkers);
  //   },
  //   click: (e, marker) => {
  //     // 通过高德原生提供的 getExtData 方法获取原始数据
  //     const extData = marker.getExtData();
  //     console.log("extData:");
  //     console.log(extData);
  //     console.log("marker:");
  //     console.log(marker);
  //   },
  // };

  return (
    <div className={styles?.mapbg}>
      <Map
        amapkey={"ef1aace83eafd3eab2d42e013b456bae"}
        viewMode="3D"
        mapStyle={mode == "light" ? "normal" : "dark"}
        pitch={0}
        {...mapconf}
        events={{
          created: (val) => {
            mapref.current = val;
          },
          zoomchange: (val) => {
            setmapconf((s) => ({
              ...s,
              zoom: mapref?.current?.getZoom(),
            }));
          },
        }}
      >
        {/* <Markers
          markers={markers?.map((it) => ({
            ...it, //其它数据
            position: {
              ...it,
            },
          }))}
          render={renderMarker}
          useCluster={true}
          events={markersEvents}
        ></Markers> */}
        {path && (
          <Polygon
            path={path}
            style={{
              strokeColor: "#13c2c2",
              strokeOpacity: 0.8,
              strokeWeight: 1,
              fillColor: "lightblue",
              fillOpacity: 0.8,
            }}
            zIndex={-100}
            events={{
              click: (e) => {
                setkey("all");
              },
            }}
          />
        )}

        <Marker
          position={{ longitude: 120.540332, latitude: 32.404477 }}
          events={{
            click: (e) => {
              setkey("all");
            },
          }}
        >
          <div style={{ width: 120, color: "#1a9c00" }}>
            如皋开发区
            <br />
            <b>综合评分：中</b>
          </div>
        </Marker>

        {path1 && (
          <Polygon
            path={path1}
            style={{
              strokeColor: "#13c2c2",
              strokeOpacity: 0.8,
              strokeWeight: 1,
              fillColor: "#3acafa",
              fillOpacity: 0.4,
            }}
            zIndex={-10}
            events={{
              click: (e) => {
                setkey("rgc");
              },
              dblclick: (e) => {
                Modal.info({
                  closable: true,
                  title: "请选择如皋科技创业园下的楼栋",
                  content: (
                    <div>
                      {data?.score_list?.map((it, i) => {
                        return (
                          <div
                            key={i}
                            className="item"
                            onClick={() => {
                              history.push(
                                `/dashboard3d?name=${data?.title}&dong=${
                                  i + 1
                                }&score=${it}`
                              );
                              Modal.destroyAll();
                            }}
                          >
                            <b>{i + 1}栋</b>
                            <span
                              style={{
                                color:
                                  it < 50
                                    ? "#ff4800"
                                    : it < 70
                                    ? "#1a9c00"
                                    : "#0274ff",
                              }}
                            >
                              {it}分
                            </span>
                          </div>
                        );
                      })}
                    </div>
                  ),
                  footer: false,getContainer: () => document.getElementById("cons"),
                });
              },
            }}
          />
        )}

        <Marker
          position={{ longitude: 120.533683, latitude: 32.404437 }}
          events={{
            click: (e) => {
              setkey("rgc");
            },
            dblclick: (e) => {
              Modal.info({
                closable: true,
                title: "请选择如皋科技创业园下的楼栋",
                content: (
                  <div>
                    {data?.score_list?.map((it, i) => {
                      return (
                        <div
                          key={i}
                          className="item"
                          onClick={() => {
                            history.push(
                              `/dashboard3d?name=${data?.title}&dong=${
                                i + 1
                              }&score=${it}`
                            );
                            Modal.destroyAll();
                          }}
                        >
                          <b>{i + 1}栋</b>
                          <span
                            style={{
                              color:
                                it < 50
                                  ? "#ff4800"
                                  : it < 70
                                  ? "#1a9c00"
                                  : "#0274ff",
                            }}
                          >
                            {it}分
                          </span>
                        </div>
                      );
                    })}
                  </div>
                ),
                footer: false,getContainer: () => document.getElementById("cons"),
              });
            },
          }}
        >
          <div style={{ width: 120, color: "#0274ff" }}>
            如皋科技创业园 <br />
            <b>综合评分：高</b>
          </div>
        </Marker>

        {path2 && (
          <Polygon
            path={path2}
            style={{
              strokeColor: "#ff4800",
              strokeOpacity: 0.8,
              strokeWeight: 1,
              fillColor: "#ff4800",
              fillOpacity: 0.4,
            }}
            zIndex={-10}
            events={{
              click: (e) => {
                setkey("wlm");
              },
              dblclick: (e) => {
                Modal.info({
                  closable: true,
                  title: "请选择万林名都城下的楼栋",
                  content: (
                    <div>
                      {data?.score_list?.map((it, i) => {
                        return (
                          <div
                            key={i}
                            className="item"
                            onClick={() => {
                              history.push(
                                `/dashboard3d?name=${data?.title}&dong=${
                                  i + 1
                                }&score=${it}`
                              );
                              Modal.destroyAll();
                            }}
                          >
                            <b>{i + 1}栋</b>
                            <span
                              style={{
                                color:
                                  it < 50
                                    ? "#ff4800"
                                    : it < 70
                                    ? "#1a9c00"
                                    : "#0274ff",
                              }}
                            >
                              {it}分
                            </span>
                          </div>
                        );
                      })}
                    </div>
                  ),
                  footer: false,getContainer: () => document.getElementById("cons"),
                });
              },
            }}
          />
        )}

        <Marker
          position={{ longitude: 120.546307, latitude: 32.393751 }}
          events={{
            click: (e) => {
              setkey("wlm");
            },
            dblclick: (e) => {
              Modal.info({
                closable: true,
                title: "请选择万林名都城下的楼栋",
                content: (
                  <div>
                    {data?.score_list?.map((it, i) => {
                      return (
                        <div
                          key={i}
                          className="item"
                          onClick={() => {
                            history.push(
                              `/dashboard3d?name=${data?.title}&dong=${
                                i + 1
                              }&score=${it}`
                            );
                            Modal.destroyAll();
                          }}
                        >
                          <b>{i + 1}栋</b>
                          <span
                            style={{
                              color:
                                it < 50
                                  ? "#ff4800"
                                  : it < 70
                                  ? "#1a9c00"
                                  : "#0274ff",
                            }}
                          >
                            {it}分
                          </span>
                        </div>
                      );
                    })}
                  </div>
                ),
                footer: false,getContainer: () => document.getElementById("cons"),
              });
            },
          }}
        >
          <div style={{ width: 120, color: "#ff4800" }}>
            万林名都城 <br />
            <b>综合评分：低</b>
          </div>
        </Marker>

        {path3 && (
          <Polygon
            path={path3}
            style={{
              strokeColor: "#13c2c2",
              strokeOpacity: 0.8,
              strokeWeight: 1,
              fillColor: "#3acafa",
              fillOpacity: 0.4,
            }}
            zIndex={-10}
            events={{
              click: (e) => {
                setkey("jsj");
              },
              dblclick: (e) => {
                Modal.info({
                  closable: true,
                  title: "请选择景盛家园下的楼栋",
                  content: (
                    <div>
                      {data?.score_list?.map((it, i) => {
                        return (
                          <div
                            key={i}
                            className="item"
                            onClick={() => {
                              history.push(
                                `/dashboard3d?name=${data?.title}&dong=${
                                  i + 1
                                }&score=${it}`
                              );
                              Modal.destroyAll();
                            }}
                          >
                            <b>{i + 1}栋</b>
                            <span
                              style={{
                                color:
                                  it < 50
                                    ? "#ff4800"
                                    : it < 70
                                    ? "#1a9c00"
                                    : "#0274ff",
                              }}
                            >
                              {it}分
                            </span>
                          </div>
                        );
                      })}
                    </div>
                  ),
                  footer: false,getContainer: () => document.getElementById("cons"),
                });
              },
            }}
          />
        )}

        <Marker
          position={{ longitude: 120.544892, latitude: 32.396235 }}
          events={{
            click: (e) => {
              setkey("jsj");
            },
            dblclick: (e) => {
              Modal.info({
                closable: true,
                title: "请选择景盛家园下的楼栋",
                content: (
                  <div>
                    {data?.score_list?.map((it, i) => {
                      return (
                        <div
                          key={i}
                          className="item"
                          onClick={() => {
                            history.push(
                              `/dashboard3d?name=${data?.title}&dong=${
                                i + 1
                              }&score=${it}`
                            );
                            Modal.destroyAll();
                          }}
                        >
                          <b>{i + 1}栋</b>
                          <span
                            style={{
                              color:
                                it < 50
                                  ? "#ff4800"
                                  : it < 70
                                  ? "#1a9c00"
                                  : "#0274ff",
                            }}
                          >
                            {it}分
                          </span>
                        </div>
                      );
                    })}
                  </div>
                ),
                footer: false,getContainer: () => document.getElementById("cons"),
              });
            },
          }}
        >
          <div style={{ width: 120, color: "#0274ff" }}>
            景盛家园 <br />
            <b>综合评分：高</b>
          </div>
        </Marker>

        {path4 && (
          <Polygon
            path={path4}
            style={{
              strokeColor: "#02ed29",
              strokeOpacity: 0.8,
              strokeWeight: 1,
              fillColor: "#02ed29",
              fillOpacity: 0.4,
            }}
            zIndex={-10}
            events={{
              click: (e) => {
                setkey("xom");
              },
              dblclick: (e) => {
                Modal.info({
                  closable: true,
                  title: "请选择西欧名邸下的楼栋",
                  content: (
                    <div>
                      {data?.score_list?.map((it, i) => {
                        return (
                          <div
                            key={i}
                            className="item"
                            onClick={() => {
                              history.push(
                                `/dashboard3d?name=${data?.title}&dong=${
                                  i + 1
                                }&score=${it}`
                              );
                              Modal.destroyAll();
                            }}
                          >
                            <b>{i + 1}栋</b>
                            <span
                              style={{
                                color:
                                  it < 50
                                    ? "#ff4800"
                                    : it < 70
                                    ? "#1a9c00"
                                    : "#0274ff",
                              }}
                            >
                              {it}分
                            </span>
                          </div>
                        );
                      })}
                    </div>
                  ),
                  footer: false,getContainer: () => document.getElementById("cons"),
                });
              },
            }}
          />
        )}

        <Marker
          position={{ longitude: 120.544121, latitude: 32.398644 }}
          events={{
            click: (e) => {
              setkey("xom");
            },
            dblclick: (e) => {
              Modal.info({
                closable: true,
                title: "请选择西欧名邸下的楼栋",
                content: (
                  <div>
                    {data?.score_list?.map((it, i) => {
                      return (
                        <div
                          key={i}
                          className="item"
                          onClick={() => {
                            history.push(
                              `/dashboard3d?name=${data?.title}&dong=${
                                i + 1
                              }&score=${it}`
                            );
                            Modal.destroyAll();
                          }}
                        >
                          <b>{i + 1}栋</b>
                          <span
                            style={{
                              color:
                                it < 50
                                  ? "#ff4800"
                                  : it < 70
                                  ? "#1a9c00"
                                  : "#0274ff",
                            }}
                          >
                            {it}分
                          </span>
                        </div>
                      );
                    })}
                  </div>
                ),
                footer: false,getContainer: () => document.getElementById("cons"),
              });
            },
          }}
        >
          <div style={{ width: 120, color: "#1a9c00" }}>
            西欧名邸 <br />
            <b>综合评分：中</b>
          </div>
        </Marker>
      </Map>
    </div>
  );
}

export default Amap;
